<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 头部 -->
      <div slot="header" class="clearfix">
        <span>{{this.$route.query.id? '试题修改':'试题录入' }}</span>
      </div>
      <!-- 主要内容 -->
      <el-form :model="newQuestions" :rules="questionsRules" ref="newQuestions">
        <!-- 学科 -->
        <el-form-item label="学科:" label-width="120px" prop="subjectID">
          <el-select
          clearable
            v-model="newQuestions.subjectID"
            value-key="value"
            placeholder="请选择"
            style="width: 36%"
            @change="subjectChange"
          >
            <el-option
              v-for="item in subjectList"
              :key="item.id"
              :label="item.subjectName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 目录 -->
        <el-form-item label="目录:" label-width="120px" prop="catalogID">
          <el-select
          clearable
            v-model="newQuestions.catalogID"
            value-key="value"
            placeholder="请选择"
            style="width: 36%"
            @change="catalogChange"
          >
            <el-option
              v-for="item in catalogList"
              :key="item.id"
              :label="item.directoryName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <!-- 企业 -->
        <el-form-item label="企业:" label-width="120px" prop="enterpriseID">
          <el-select
          clearable
            v-model="newQuestions.enterpriseID"
            value-key="value"
            placeholder="请选择"
            style="width: 36%"
          >
            <el-option
              v-for="item in enterpriseList"
              :key="item.id"
              :label="item.company"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <!-- 城市 -->
        <el-form-item label="城市:" label-width="120px" prop="province">
          <el-select
          clearable
            v-model="newQuestions.province"
            :value="provinces"
            value-key="value"
            placeholder="请选择"
            style="margin-right: 1%; width: 17.5%"
            @change="changeCitys"
          >
            <el-option
            v-for="item in provinces"
            :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          <el-select
          clearable
          placeholder="请选择"
          style="width: 17.5%"
          v-model="newQuestions.city"
          value-key="value">
            <el-option
            v-for="(item) in citys"
            :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <!-- 方向 -->
        <el-form-item label="方向:" label-width="120px" prop="direction">
          <el-select
          clearable
            v-model="newQuestions.direction"
            value-key="value"
            placeholder="请选择"
            style="width: 36%"
          >
            <el-option
              v-for="item in directionList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <!-- 题型 -->
        <el-form-item label="题型:" label-width="120px" prop="questionType">
          <el-radio-group v-model="newQuestions.questionType">
            <el-radio :label="1">单选</el-radio>
            <el-radio :label="2">多选</el-radio>
            <el-radio :label="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 难度 -->
        <el-form-item label="难度:" label-width="120px" prop="difficulty">
          <el-radio-group v-model="newQuestions.difficulty">
            <el-radio :label="1">简单</el-radio>
            <el-radio :label="2">一般</el-radio>
            <el-radio :label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 题干 -->
        <el-form-item label="题干:" label-width="120px" prop="question" style="margin-bottom: -56px;">
          <quillEditor
            style="height: 180px; margin-bottom: 56px;"
            ref="edit"
            :options="editorOption"
            v-model="newQuestions.question"
          />
        </el-form-item>
        <!-- 单选 -->
        <el-form-item
          label="选项:"
          label-width="120px"
          style="margin-top: 100px; margin-bottom: -60px;"
          v-if="newQuestions.questionType === 1"
        >
          <el-row style="margin-bottom: 40px" v-for="(item,index) in singleOption" :key="item.code">
            <el-col :span="1">
                <el-radio v-model="radio" :label="index">{{ item.code }}:</el-radio>
            </el-col>
            <el-col :span="5">
              <el-input v-model="item.title"/>
            </el-col>
            <el-col :span="6">
              <el-upload
                action="#"
                list-type="picture-card"
                :auto-upload="false"
              >
                <el-button type="text" style="color:black">上传图片</el-button>
              </el-upload>
            </el-col>
          </el-row>
          <el-button type="danger" size="small" disabled>+增加选项与答案</el-button>
        </el-form-item>
        <!-- 多选 -->
        <el-form-item
          label="选项:"
          label-width="120px"
          style="margin-top: 100px; margin-bottom: -60px;"
          v-if="newQuestions.questionType === 2"
        >
          <el-row style="margin-bottom: 40px" v-for="(item,index) in MultipleOption" :key="item.code">
            <el-checkbox-group v-model="checkList">
            <el-col :span="1">
              <el-checkbox :label="index">{{ item.code }}:</el-checkbox>
            </el-col>
            <el-col :span="5">
              <el-input v-model="item.title"/>
            </el-col>
            <el-col :span="6">
            <el-upload action="#" list-type="picture-card" :auto-upload="false">
              <el-button type="text">上传图片</el-button>
            </el-upload>
            </el-col>
          </el-checkbox-group>
          </el-row>
          <el-button type="danger" @click="addOptions" size="small">+增加选项与答案</el-button>
        </el-form-item>
        <!-- 解析视频 -->
        <el-form-item label="解析视频:" label-width="120px" style="margin-top: 80px">
          <el-input style="width: 36%" v-model="newQuestions.videoURL"/>
        </el-form-item>
        <!-- 答案解析 -->
        <el-form-item label="答案解析:" label-width="120px" prop="answer" style="margin-bottom: -56px;">
          <quillEditor v-model="newQuestions.answer" style="height: 180px; margin-bottom: 56px;" :options="editorOption" />
        </el-form-item>
        <!-- 题目备注 -->
        <el-form-item
          label="题目备注:"
          label-width="120px"
          style="margin-top: 80px"
        >
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            style="width: 36%"
            v-model="newQuestions.remarks"
          >
          </el-input>
        </el-form-item>
        <!-- 试题标签 -->
        <el-form-item label="试题标签:" label-width="120px" prop="tags">
          <el-select
            v-model="newQuestions.tags"
            multiple
            :allow-create="true"
            :filterable="true"
            value-key="value"
            placeholder="请选择试题标签"
            style="width: 36%"
          >
            <el-option
              v-for="item in tagsList"
              :key="item.tagName" :label="item.tagName" :value="item.tagName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="120px">
          <template v-if="this.$route.query.id">
            <el-button type="success" @click="btnModify">确认修改</el-button>
          </template>
          <template>
            <el-button type="primary" @click="btnOk">确认提交</el-button>
          </template>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// 富文本编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

// 学科,目录,企业,题库接口5
import { subjectlist, directoryslist, companyslist, questionsdetail, questionslist, questionsadd, questionsupdate, tagslist, options } from '@/api/hmmm/questions-newb'
// 导入城市和区域/县
import { provinces, citys } from '@/api/hmmm/citys'
// 常量接口 难度 题型 方向；
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
export default {
  name: 'QuestionNewb',
  components: {
    quillEditor

  },
  data () {
    return {
      radio: '', // 单选
      checkList: [], // 复选框列表
      subjectList: [], // 学科列表
      catalogList: [], // 目录列表
      enterpriseList: [], // 企业列表
      provinces: [], // 城市外省
      citys: [], // 城市内省
      directionList: direction,
      questionType, // 题型
      difficulty, // 难度
      options, // 选项
      MultipleStart: 4, // 多选起始值
      tagsList: '', // 试题标签
      // 富文本顶部工具栏样式定制
      editorOption: {
        // some quill options
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote'],
            ['code-block', 'image', 'link']
          ]
        }
      },
      // 试题录入表单
      newQuestions: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市外省
        city: '', // 城市内区域
        direction: '', // 方向
        questionType: 1, // 题型
        difficulty: 1, // 难度
        question: '', // 题干
        options: [], // 选项
        videoURL: ' ', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: [] // 试题标签
      },
      // 表单规则
      questionsRules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'change' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'change' }],
        enterpriseID: [{ required: true, message: '请选择企业', trigger: 'change' }],
        province: [{ required: true, message: '请选择城市', trigger: 'change' }],
        direction: [{ required: true, message: '请选择方向', trigger: 'change' }],
        question: [{ required: true, message: '题干不能为空' }],
        answer: [{ required: true, message: '题干不能为空' }]

      }
    }
  },
  async created () {
    this.getSubject()
    this.getEnterprise()
    this.getProvinces()
    this.getQuestions()
  },
  computed: {
    // 单选选项
    singleOption () {
      return this.options.filter((item, i) => i < 4)
    },
    // 多选选项
    MultipleOption () {
      return this.options.filter((item, i) => i < this.MultipleStart)
    }
  },
  methods: {
    // 获取学科
    async getSubject () {
      const { data: { items } } = await subjectlist({ page: 1, pagesize: 100 })
      this.subjectList = items
    },
    // 学科改变时触发 获取对应的目录
    async subjectChange (id) {
      // 重置目录和标签
      this.newQuestions.catalogID = ''
      this.newQuestions.tags = []
      const { data: { items } } = await directoryslist({ subjectID: id })
      this.catalogList = items
    },
    // 目录改变时获取对应的标签
    async catalogChange (id) {
      // 重置标签
      this.newQuestions.tags = []
      const { data: { items } } = await tagslist({ subjectID: id })
      this.tagsList = items
    },
    // 获取企业
    async getEnterprise () {
      const { data: { items } } = await companyslist()
      this.enterpriseList = items
    },
    // 获取城市外省
    getProvinces () {
      this.provinces = provinces()
    },
    // 城市改变时获取对应的区域
    changeCitys (val) {
      // 重置地区
      this.newQuestions.city = ''
      this.citys = citys(val)
    },
    // 获取题目详情
    async getQuestions () {
      if (this.$route.query.id) {
        const res = await questionsdetail({ id: this.$route.query.id })
        this.newQuestions = res
        // 标签字符串改数组
        this.newQuestions.tags = res.tags.split(',')
        this.MultipleStart = res.options.length
        // 选项重新加载
        const optionArr = options
        const newOptions = optionArr.splice(+this.form.options.length)
        this.options = res.options.concat(newOptions)
        if (this.newQuestions.questionType === 1) {
          this.newQuestions.options.forEach((item, index) => {
            if (item.isRight === 1) {
              this.radio = index
            } else if (this.newQuestions.questionType === 2) {
              this.newQuestions.options.forEach((item, index) => {
                if (item.isRight === 1) {
                  this.checkList.push(index)
                }
              })
            }
          })
        }
      }
    },
    // 增加多选项
    addOptions () {
      if (this.MultipleStart > this.options.length - 1) {
        return
      }
      this.MultipleStart++
    },
    // 提交选项
    async btnOk () {
      // 表单验证
      await this.$refs.newQuestions.validate()
      // 标签转字符串
      this.newQuestions.tags = this.newQuestions.tags.join(',')
      this.newQuestions.questionType = '' + this.newQuestions.questionType
      this.newQuestions.difficulty = '' + this.newQuestions.difficulty
      // 处理options
      if (this.newQuestions.questionType === '1') {
        const newOptions = this.options.slice(0, 4)
        newOptions.forEach((item, index) => {
          if (index === this.radio) {
            item.isRight = true
          } else {
            item.isRight = false
          }
        })
        // 添加
        this.newQuestions.options = newOptions
        // 多选
      } else if (this.newQuestions.questionType === '2') {
        const newOptions = this.options.slice(0, this.MultipleStart)
        for (let i = 0; i < newOptions.length; i++) {
          this.checkList.forEach(item => {
            if (i === item) {
              newOptions[i].isRight = true
            }
          })
        }
        // 添加
        this.newQuestions.options = newOptions
      }
      await questionsadd(this.newQuestions)
      await questionslist()
      this.$message.success('确认提交')
      this.$router.push('/questions/list')
      // 重置表单
      this.newQuestions = {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市外省
        city: '', // 城市内区域
        direction: '', // 方向
        questionType: 1, // 题型
        difficulty: 1, // 难度
        question: '', // 题干
        options: [], // 选项
        videoURL: ' ', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: [] // 试题标签
      }
    },
    // 修改选项
    async btnModify () {
      // 表单验证
      await this.$refs.newQuestions.validate()
      // 标签转字符串
      this.newQuestions.tags = this.newQuestions.tags.join(',')
      // 数字转字符串
      this.newQuestions.questionType = '' + this.newQuestions.questionType
      this.newQuestions.difficulty = '' + this.newQuestions.difficulty
      // 处理options
      if (this.newQuestions.questionType === '1') {
        const newOptions = this.options.slice(0, 4)
        newOptions.forEach((item, index) => {
          if (index === this.radio) {
            item.isRight = true
          } else {
            item.isRight = false
          }
        })
        this.newQuestions.options = newOptions.reverse()
        return this.newQuestions.options

        // 多选
      } else if (this.newQuestions.questionType === '2') {
        const newOptions = this.options.slice(0, this.MultipleStart)
        for (let i = 0; i < newOptions.length; i++) {
          this.checkList.forEach(item => {
            if (i === item) {
              newOptions[i].isRight = true
            }
          })
        }
        this.newQuestions.options = newOptions.reverse()
        return this.newQuestions.options
      }
      await questionsupdate(this.newQuestions)
      await questionslist()
      this.$message.success('修改成功')
      this.$router.push('/questions/list')
    }

  }
}
</script>

<style scoped >
.box-card {
  margin: 20px;
}
>>> .el-upload--picture-card {
  margin-top: -12px;
  margin-left: 6px;
    width: 120px;
    height: 60px;
    line-height: 60px;
}
</style>
